import React from 'react';
import { connect } from 'dva';
import { Layout, Menu, Icon, Button } from 'antd';
import styles from './BasicLayout.css'
import {
  Switch,
  Route
} from 'react-router-dom';
import HeaderMenu from './HeaderMenu'
import Carouser from '../dashBoard/Carouser'

const { Header, Content, Footer, Sider } = Layout;
const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;

const BasicLayout = (props) => {
  const menu = (
    <Menu
    selectedKeys={1}
    mode="horizontal"
  >
    <Menu.Item key="mail">
      <Icon type="mail" />Navigation One
    </Menu.Item>
    <Menu.Item key="app" disabled>
      <Icon type="appstore" />Navigation Two
    </Menu.Item>
    <SubMenu title={<span className="submenu-title-wrapper"><Icon type="setting" />Navigation Three - Submenu</span>}>
      <MenuItemGroup title="Item 1">
        <Menu.Item key="setting:1">Option 1</Menu.Item>
        <Menu.Item key="setting:2">Option 2</Menu.Item>
      </MenuItemGroup>
      <MenuItemGroup title="Item 2">
        <Menu.Item key="setting:3">Option 3</Menu.Item>
        <Menu.Item key="setting:4">Option 4</Menu.Item>
      </MenuItemGroup>
    </SubMenu>
    <Menu.Item key="alipay">
      <a href="https://ant.design" target="_blank" rel="noopener noreferrer">Navigation Four - Link</a>
    </Menu.Item>
  </Menu>
  );
  return (
    <Layout style={{height:'100vh'}}>
    <Sider
      breakpoint="lg"
      collapsedWidth="0"
      onBreakpoint={(broken) => { console.log(broken); }}
      onCollapse={(collapsed, type) => { console.log(collapsed, type); }}
    >
      <div className={styles.logo} />
      <Menu theme="dark" mode="inline" defaultSelectedKeys={['4']}>
        <Menu.Item key="1">
          <Icon type="dashboard" />
          <span className="nav-text">Dashboard </span>
        </Menu.Item>
        <Menu.Item key="2">
          <Icon type="form" />
          <span className="nav-text">Form</span>
        </Menu.Item>
        <Menu.Item key="3">
          <Icon type="table" />
          <span className="nav-text">List</span>
        </Menu.Item>
        <Menu.Item key="4">
          <Icon type="profile" />
          <span className="nav-text">Profile</span>
        </Menu.Item>
        <Menu.Item key="5">
          <Icon type="check-circle" />
          <span className="nav-text">Result</span>
        </Menu.Item>
        <Menu.Item key="6">
          <Icon type="warning" />
          <span className="nav-text">Exception</span>
        </Menu.Item>
        <Menu.Item key="7">
          <Icon type="user" />
          <span className="nav-text">Accout</span>
        </Menu.Item>
      </Menu>
    </Sider>
    <Layout>
      <Header style={{ background: '#fff', padding: 0 }}>
        <HeaderMenu />
      </Header>
      <Content style={{ margin: '24px 16px 0' }}>
        <div style={{ padding: 24, background: '#fff', minHeight: 460 }}>
          <Switch>
            <Route path={`${props.match.url}/:topicId`} component={HeaderMenu}/>
            <Route exact path={props.match.url} component={Carouser}/>
          </Switch>
        </div>
      </Content>
      <Footer style={{ textAlign: 'center' }}>
        Ant Design ©2018 Created by Ant UED
      </Footer>
    </Layout>
  </Layout>
  );
}

BasicLayout.propTypes = {};

export default connect()(BasicLayout);
